<template>
  <div class="ratingList model-list-container">
    <PageTitle :goBack="false" title="模型列表" :border="true" />
    <div class="myCardCss" style="width: 100%">
      <div class="searchDiv">
        <duv class="search-container">
          <a-input
            style="width: 240px"
            placeholder="请输入评分模型名称查询"
            v-model:value="formData.name"
            allow-clear
            @keyup.enter="searchData"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <!-- 查询按钮 -->
          <a-button type="primary" danger @click="searchData" class="search-model-btn"
            >查 询</a-button
          >
        </duv>
        <div class="cmd-btn-container">
          <a-button type="primary" danger @click="openAddModel" class="add-model-btn"
            >新增模型</a-button
          >
          <a-button class="remove-model-btn" @click="deleteData">删除模型</a-button>
        </div>
      </div>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :row-selection="rowSelection"
        row-key="id"
        :pagination="false"
        class="model-list"
        :scroll="{ y: 540 }"
      >
        <template #index="{ index }">
          <label>{{ index + 1 + (pageForm.limit - 1) * pageForm.size }}</label>
        </template>
        <template #modifyUserId="{ record }">
          <label>{{ record.modifyUserId ? record.modifyUserId?.name : '' }}</label>
        </template>
        <template #operation="{ record }">
          <a style="color: #1473dc" @click="viewTarget(record.id)">查看指标</a>
        </template>
        <template #status="{ record }">
          <a-switch
            v-model:checked="record.status"
            :checkedValue="1"
            :unCheckedValue="0"
            @change="setStatus(record)"
          />
          <!--          <a style="color: #1473dc" @click="viewTarget(record.id)">查看指标</a>-->
        </template>
        <template #bodyCell="{ record, column, index }">
          <!-- 添加时间 -->
          <span v-if="column.dataIndex == 'createDate'">{{
            record.createDate ? record.createDate : '-'
          }}</span>
          <!-- 最后一次更新时间 -->
          <span v-if="column.dataIndex == 'modifyDate'">{{
            record.modifyDate ? record.modifyDate : '-'
          }}</span>
        </template>
      </a-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <!-- 共有多少条 -->
        <div class="total-container"
          >共 <span>{{ pageForm.total }}</span> 条</div
        >
        <a-pagination
          size="small"
          :total="pageForm.total"
          :pageSize="pageForm.size"
          :current="pageForm.limit"
          :hideOnSinglePage="true"
          :showSizeChanger="false"
          @change="changePage"
        />
      </div>
    </div>
    <a-modal
      v-model:visible="isShowAdd"
      :maskClosable="false"
      :width="420"
      :centered="true"
      okText="保存模型并添加指标"
      title="新增模型"
      @ok="saveModelData"
      :destroyOnClose="true"
      class="add-model-dialog"
    >
      <a-form
        ref="formInstance"
        :model="addModelForm"
        :label-col="{ span: 8 }"
        style="margin-top: 16px"
        :rules="rules"
      >
        <a-form-item label="模型名称" :name="['name']">
          <a-input
            v-model:value="addModelForm.name"
            placeholder="请输入模型名称"
            style="width: 240px"
          />
        </a-form-item>
        <a-form-item label="模型使用说明">
          <a-textarea
            v-model:value="addModelForm.description"
            placeholder="请输入模型使用说明"
            :rows="4"
            style="width: 240px; margin-top: 16px"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- <a-modal v-model:visible="isShowAddZB" :maskClosable="false" :width="420" :centered="true" okText="保存指标分栏" title="新增指标" @ok="saveZBData"
      :destroyOnClose="true">
      <a-form :model="addZBForm" :label-col="{ span: 8 }" style="margin-top: 16px">
        <a-form-item label="指标名称">
          <a-input v-model:value="addZBForm.name" placeholder="请输入指标名称" style="width: 240px" />
        </a-form-item>
        <a-form-item label="指标使用说明">
          <a-textarea v-model:value="addZBForm.description" placeholder="请输入指标使用说明" :rows="4" style="width: 240px" />
        </a-form-item>
      </a-form>
    </a-modal> -->

    <!-- 删除模型弹窗 -->
    <remove-model v-model:open-status="removeModelDialog" @ok="okDeleteModel" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onBeforeMount } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import RemoveModel from './components/RemoveModel.vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { addModel, changeStatus, deleteModel, getModelList } from '/@/api/supplierRating';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import type { Rule } from 'ant-design-vue/es/form';
  import type { FormInstance } from 'ant-design-vue';

  const router = useRouter();

  // 生命周期
  onBeforeMount(() => {
    getList();
  });

  const formInstance = ref<FormInstance>();

  // 验证规则
  const rules = ref<Record<string, Rule[]>>({
    name: [
      {
        required: true,
        whitespace: true,
        trigger: ['blur', 'change'],
        message: '请输入指标名称',
      },
    ],
  });

  let formData = ref({
    name: '',
  });
  let dataSource = ref([]);
  let columns = ref([
    {
      title: '序号',
      align: 'center',
      slots: { customRender: 'index' },
      width: 52,
    },
    {
      title: '模型名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left',
      maxWidth: 160,
      ellipsis: true,
    },
    {
      title: '指标数量',
      dataIndex: 'metricNum',
      key: 'metricNum',
      align: 'left',
      width: 88,
    },
    {
      title: '模型分值',
      dataIndex: 'score',
      key: 'score',
      align: 'left',
      width: 88,
    },
    {
      title: '模型使用说明',
      dataIndex: 'description',
      key: 'description',
      align: 'left',
      maxWidth: 382,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'left',
      maxWidth: 382,
      ellipsis: true,
      slots: { customRender: 'status' },
    },
    {
      title: '添加时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'left',
      width: 128,
    },
    {
      title: '添加人',
      dataIndex: 'modifyUserId',
      key: 'modifyUserId',
      align: 'left',
      slots: { customRender: 'modifyUserId' },
      width: 88,
    },
    {
      title: '最后一次更新',
      dataIndex: 'modifyDate',
      key: 'modifyDate',
      align: 'left',
      width: 128,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'left',
      width: 100,
    },
  ]);
  let pageForm = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getList();
  }
  async function getList() {
    let queryData = {
      name: formData.value.name,
      limit: pageForm.value.limit,
      size: pageForm.value.size,
    };
    const res = await getModelList(queryData);
    dataSource.value = res.list;
    pageForm.value.total = res.total;
  }
  function searchData() {
    pageForm.value.limit = 1;
    getList();
  }

  let selectLists = ref<Array<any>>([]); // 已选择的数据
  const rowSelection = {
    onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
      selectLists.value = selectedRows;
    },
  };

  /**
   * 删除模型弹窗
   */
  const removeModelDialog = ref<boolean>(false);
  async function deleteData() {
    if (!selectLists.value.length) {
      return message.warning('请选择你要删除的数据');
    }
    removeModelDialog.value = true;
  }

  /**
   * 确定删除弹窗
   */
  async function okDeleteModel() {
    try {
      const res = await deleteModel(selectLists.value.map((item) => item.id).toString());
      await getList();
    } catch (error) {}
  }

  // 新增模型
  let isShowAdd = ref(false);
  let addModelForm = ref({
    name: '',
    description: '',
  });
  function openAddModel() {
    isShowAdd.value = true;
  }
  async function saveModelData() {
    try {
      await formInstance.value?.validateFields();
      let queryData = {
        name: addModelForm.value.name,
        description: addModelForm.value.description,
      };
      const res = await addModel(queryData);
      message.success('保存模型成功');
      isShowAdd.value = false;
      getList();
    } catch (error) {}
  }

  // 新增指标
  let isShowAddZB = ref(false);
  let addZBForm = ref({
    name: '',
    description: '',
  });
  async function saveZBData() {
    isShowAddZB.value = false;
  }

  /**
   * 查看指标
   */
  function viewTarget(id: string | number) {
    if (!id) return;
    router.push({
      path: '/supplierRating/indicatorDetails',
      query: {
        modelId: id,
      },
    });
  }
  async function setStatus(item: any) {
    let queryData = {
      modelId: item.id,
      status: item.status,
    };
    await changeStatus(queryData);
    message.success('修改成功');
  }
</script>
<style lang="less" scoped>
  .ratingList {
    .searchDiv {
      margin-bottom: 16px;

      .searchBtn {
        float: right;
        border: 1px solid #1473dc;
        width: 88px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: #1473dc;
        cursor: pointer;
      }
    }
  }

  .model-list-container {
    :deep(.search-container) {
      .ant-input-affix-wrapper {
        margin-left: 0px !important;
      }
      .search-model-btn {
        margin-left: 8px;
        border: unset;
        border-radius: 4px;
      }
    }

    .myCardCss {
      .searchDiv {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cmd-btn-container {
          display: flex;
          align-items: center;
        }
      }

      .add-model-btn {
        height: 32px;
        padding: 0px 16px;
        background: #fff !important;
        border: 1px solid #1473dc;
        box-sizing: border-box;
        font-size: 14px;
        color: #1473dc;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
      }

      .remove-model-btn {
        margin-left: 12px;
        border-radius: 4px;
      }
    }

    :deep(.model-list) {
      .ant-table-thead {
        min-height: 40px;

        tr {
          .ant-table-cell {
            background: #f5f7fa;
          }
        }

        .ant-table-cell {
          color: #606266;
          font-size: 14px;
          font-weight: bold;
        }
      }

      .ant-table-cell {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: normal;
        color: #303133;

        &.ant-table-selection-column {
          padding: 0px;

          .ant-checkbox-wrapper {
            margin-left: 0px !important;
          }
        }
      }
    }

    :deep(.pagination-container) {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 16px;

      .ant-pagination {
        margin-left: 16px;

        .ant-pagination-item {
          border: unset !important;
          height: 32px !important;
          line-height: 32px !important;

          &.ant-pagination-item-active {
            background-color: #fff !important;

            a {
              color: #c11a20 !important;
            }
          }
        }

        .ant-pagination-next,
        .ant-pagination-prev {
          height: 32px !important;
          line-height: 32px !important;
          border: unset !important;

          .ant-pagination-item-link {
            border: unset !important;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .total-container {
        color: #606266;
        font-size: 14px;

        & > span {
          color: #c11a20;
        }
      }
    }
  }
</style>
<style lang="less">
  .add-model-dialog {
    .ant-form-item-explain-connected {
      display: none;
    }

    .ant-modal-header {
      height: 56px;
      padding: 0px 20px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }

    .ant-modal-close {
      top: 28px;
      right: 20px;
      transform: translateY(-50%);
    }

    .ant-modal-close-x {
      width: 16px;
      height: 16px;
      line-height: 1;
    }
  }
</style>
